<template>
  <div class="">
    <div class="punch_clock_div">

        <el-row>
          <el-col>
            <svg width="100" height="100"  @click="punchClick(1)">
              <circle cx="50" cy="50" r="40" stroke="black" stroke-width="0" fill="#9BD1F9"/>
              <circle cx="50" cy="50" r="38" v-if="punched.clockTimeStart == null" stroke="black" stroke-width="0" fill="#C3E7FA"/>
              <circle cx="50" cy="50" r="34" v-if="punched.clockTimeStart == null" stroke="black" stroke-width="0" fill="#E6F6FC" />
              <circle cx="70" cy="30" r="5" stroke="black" stroke-width="0" fill="white" />
            </svg>
            <div class="punch_up"  @click="punchClick(1)">
              <div>上班打卡</div>
              <div>{{punched.clockTimeStart}}</div>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <svg width="100" height="100"  @click="punchClick(2)">
              <circle cx="50" cy="50" r="40" opacity="0.5" fill="#EF9E6A" />
              <circle cx="50" cy="50" r="32" v-if="punched.clockTimeStart == null" opacity="0.5" fill="#EF9E6A" />
              <circle cx="50" cy="50" r="30" v-if="punched.clockTimeStart == null" opacity="0.5" fill="#EF9E6A" />
              <circle cx="70" cy="70" r="5" stroke="black" stroke-width="0" fill="white" />
            </svg>
            <div class="punch_down"  @click="punchClick(2)">
              <div>下班打卡</div>
              <div>{{punched.clockTimeEnd}}</div>
            </div>
          </el-col>
        </el-row>

    </div>
  </div>
</template>

<script>

import {formatDateHHmmss, formatDateyyyyMMdd} from "@/utils";
import {addPunch, queryPunchByDate} from "@/api/business/punch";

export default {
  name: "Terminal",
  components: {  },
  data() {
    return {
      isLogin: false,
      punched: {},
      form: {
        clockTimeStart: undefined,
        clockTimeEnd: undefined,
      },
      // 遮罩层
      loading: true,
    };
  },
  created() {
    this.loadPunchRecord();
  },
  methods: {
    loadPunchRecord() {
      let now = formatDateyyyyMMdd(new Date());
      queryPunchByDate(now).then(response => {
        this.punched = response.data;
      });
    },
    punchClick(type) {
      console.log("type", type)
      if(type == 1) {
        this.form.clockTimeStart = formatDateHHmmss(new Date());
      } else if(type == 2) {
        this.form.clockTimeEnd = formatDateHHmmss(new Date());
      }
      addPunch(this.form).then(response => {
        if (response.code === 200) {
          this.msgSuccess("打卡成功");
          this.open = false;
          this.loadPunchRecord();
        }
      });
    },
  }
};
</script>
<style>

.punch_clock_div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-color: #ccc;
}

.punch_up {
  position: relative;
  float: left;
  left: 5.5em;
  top: 2.5em;
  font-size: 0.75em;
  text-align: center;
}

.punch_down {
  position: relative;
  float: left;
  left: 5.5em;
  top: 2.5em;
  font-size: 0.75em;
  text-align: center;
}

.half_opc {
  opacity: 0.5;
}
</style>
